<template>
  <div>
    <div class="page-body">
      <FilterTable
        ref="table"
        height="250"
        :isSelectColumn="false"
        :isToperInfo="false"
        :isColumnFilter="false"
        :columns="columns"
        :dataSource="dataSource"
        :onColumnsChange="columns => this.columns = columns"
      ></FilterTable>
    </div>
    <div class="page-footer">
      <el-button size="small" @click="$emit('cancel')">取消</el-button>
    </div>
  </div>
</template>
<script>
import { getRemainingAppointments } from '@/api/index.js';

const darkColor = "#E4E7ED";

const timeList = [
  { hour: '07' },
  { hour: '08' },
  { hour: '09' },
  { hour: '10' },
  { hour: '11' },
  { hour: '12' },
  { hour: '13' },
  { hour: '14' },
  { hour: '15' },
  { hour: '16' },
  { hour: '17' },
  { hour: '18' },
  { hour: '19' },
  { hour: '20' },
  { hour: '21' }
];

export default {
  mounted() {
    this.initData();
  },
  props:[
    "bookingComeDate"
  ],
  data() {
    return {
      columns: this.createColumns(15),
      dataSource: [...timeList],
      bookingModel: 0,
      params: {
        bookingComeDate: this.bookingComeDate
      }
    };
  },
  methods: {
    createColumns(t) {
      let columns = [];
      if (t == 20) {
        columns = [
          {
            title: '时',
            dataIndex: 'hour',
            align: 'center',
            render: props => {
              return <div>{props.row.hour}</div>;
            }
          },
          {
            title: '20',
            dataIndex: '20',
            align: 'center',
            render: props => {
              return (
                <div
                  style={{ background: this.changeColor('20',props) ? darkColor : '' }}
                  onClick={() => {
                    this.confirm(props.row, '20');
                  }}
                >
                  {props.row['20']}
                </div>
              );
            }
          },
          {
            title: '40',
            dataIndex: '40',
            align: 'center',
            render: props => {
              return (
                <div
                  style={{ background: this.changeColor('40',props) ? darkColor : '' }}
                  onClick={() => {
                    this.confirm(props.row, '40');
                  }}
                >
                  {props.row['40']}
                </div>
              );
            }
          },
          {
            title: '60',
            dataIndex: '60',
            align: 'center',
            render: props => {
              return (
                <div
                  style={{ background: this.changeColor('60',props) ? darkColor : '' }}
                  onClick={() => {
                    this.confirm(props.row, '60');
                  }}
                >
                  {props.row['60']}
                </div>
              );
            }
          }
        ];
      } else if (t == 15) {
        columns = [
          {
            title: '时',
            dataIndex: 'hour',
            align: 'center',
            render: props => {
              return <div>{props.row.hour}</div>;
            }
          },
          {
            title: '15',
            dataIndex: '15',
            align: 'center',
            render: props => {
              return (
                <div
                  style={{ background: this.changeColor('15',props) ? darkColor : '' }}
                  onClick={() => {
                    this.confirm(props.row, '15');
                  }}
                >
                  {props.row['15']}
                </div>
              );
            }
          },
          {
            title: '30',
            dataIndex: '30',
            align: 'center',
            render: props => {
              return (
                <div
                  style={{ background: this.changeColor('30',props) ? darkColor : '' }}
                  onClick={() => {
                    this.confirm(props.row, '30');
                  }}
                >
                  {props.row['30']}
                </div>
              );
            }
          },
          {
            title: '45',
            dataIndex: '45',
            align: 'center',
            render: props => {
              return (
                <div
                  style={{ background: this.changeColor('45',props) ? darkColor : '' }}
                  onClick={() => {
                    this.confirm(props.row, '45');
                  }}
                >
                  {props.row['45']}
                </div>
              );
            }
          },
          {
            title: '60',
            dataIndex: '60',
            align: 'center',
            render: props => {
              return (
                <div
                  style={{ background: this.changeColor('60',props) ? darkColor : '' }}
                  onClick={() => {
                    this.confirm(props.row, '60');
                  }}
                >
                  {props.row['60']}
                </div>
              );
            }
          }
        ];
      }
      return columns;
    },
    changeColor(index,col){
      // console.log("col",col);
      let res = col.row[index];
      if (res){
        return false;
      }
      else{
        return true;
      }
    },
    createDataSource(data) {
      let keysArr = Object.keys(data);
      keysArr.length = keysArr.length - 1;
      const timeL = [...timeList];
      keysArr.forEach(item => {
        const p = { time: item, hour: item.split(':')[0], min: item.split(':')[1], num: data[item] };
        const time = timeL.find(x => x.hour === p.hour);
        time[p.min] = p.num;
      });
      console.log('timeL', timeL);
      return timeL;
    },
    async initData() {
      const res = await getRemainingAppointments(this.params);
      this.columns = this.createColumns(res.data.bookingModel);
      this.dataSource = this.createDataSource(res.data);
      this.bookingModel = res.data.bookingModel;
      console.log("bookingComeDate",this.bookingComeDate);
    },
    confirm(row,min) {
      // console.log(`${row.hour}:${min}`);
      if (row[min] === 0){
        this.$message({
            type: 'warning',
            message: '该时段可预约数为0!'
          });
      }
      else if (this.bookingComeDate == moment().format('YYYY-MM-DD') && row.hour < moment().hour() + 4) {
        this.$message({
            type: 'warning',
            message: '当天的预约只能选择4小时后!'
          });
      }
      else{
        if (min == this.bookingModel){
          this.$emit('confirm', `${row.hour}:00`);
        }
        else{
          this.$emit('confirm', `${row.hour}:${min - this.bookingModel}`);
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
.page-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
}
</style>
